<template>
  <div class="con">
    <div id="zheline" class="container"></div>
    <select name="" id="" class="select">
      <option value="1月">1月</option>
      <option value="2月">2月</option>
      <option value="3月">3月</option>
      <option value="4月">4月</option>
      <option value="5月">5月</option>
      <option value="6月">6月</option>
      <option value="7月">7月</option>
      <option value="8月">8月</option>
      <option value="9月">9月</option>
      <option value="10月">10月</option>
      <option value="11月">11月</option>
      <option value="12月">12月</option>
    </select>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      echart: null,
    };
  },
  mounted() {
    this.initEchart();
  },
  methods: {
    initEchart() {
      this.$nextTick(() => {
        this.echart = echarts.init(document.querySelector("#zheline"));
        this.echart.setOption(this.option());
      });
    },
    option() {
      let option = {
        title: {
          text: "用户增长分布图",
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(240,240,240,0.7)",
          textStyle: {
            color: "#333", //设置文字颜色
            lineHeight: 30,
          },
          padding: [0, 10, 10, 10],
        },
        icon: "rectangle",
        color: ["#a416fe", "#60caf9", "#f48442"],
        legend: {
          data: ["新增用户", "活跃用户", "临时停车用户"],
          right: 260,
          top: 40,
        },
        grid: {
          x: 100,
          y: 100,
          x2: 100,
          y2: 100,
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
          show: true,
          shadowColor: "rgba(0, 0, 0, 0.5)",
          shadowBlur: 5,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1日",
            "3日",
            "6日",
            "9日",
            "12日",
            "15日",
            "18日",
            "21日",
            "24日",
            "27日",
            "30日",
          ],
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        yAxis: {
          type: "value",
          max: 7000,
          min: 0,
          interval: 1750,
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            name: "新增用户",
            type: "line",
            smooth: true,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 10,
                  color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      offset: 0,
                      color: "rgba(164,22,254,0)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(164,22,254,1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(164,22,254,0)",
                    },
                  ]), //线条渐变色
                },
              },
            },
            data: [
              1280, 1332, 1071, 1394, 4908, 2360, 2109, 1280, 1732, 1501, 1934,
            ],
          },
          {
            name: "活跃用户",
            type: "line",
            smooth: true,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 10,
                  color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      offset: 0,
                      color: "rgba(96,202,249,0)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(96,202,249,1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(96,202,249,0)",
                    },
                  ]), //线条渐变色
                },
              },
            },
            data: [
              2250, 1852, 1931, 2374, 2990, 3350, 3910, 2280, 1872, 1961, 2334,
            ],
          },
          {
            name: "临时停车用户",
            type: "line",
            smooth: true,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 10,
                  color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      offset: 0,
                      color: "rgba(244,132,66,0)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(244,132,66,1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(244,132,66,0)",
                    },
                  ]), //线条渐变色
                },
              },
            },
            data: [
              1503, 2342, 2051, 1574, 1980, 3630, 4160, 1650, 2732, 2501, 1534,
            ],
          },
        ],
      };
      return option;
    },
  },
};
</script>

<style lang="less" scoped>
.con {
  background-color: #fff;
  position: relative;
  margin: 20px 0px;
  border-radius: 5px;
  overflow-x: auto;
  overflow: hidden;
  box-shadow: 0 3px 16px 0px #bbb8ca;
}
.container {
  width: 100%;
  height: 400px;
}
.select {
  color: #6862b9;
  border: none;
  outline: none;
  position: absolute;
  right: 55px;
  top: 10px;
}
</style>